<template>
    <div class="user_page">
        <div class="avatorInfo">
            <div class="avatorInfo1">
                <div class="left">
                    <div class="avatar_img"><el-avatar :size="50" src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/09/07/1631011204289.png"></el-avatar></div>
                    <h3>{{this.user.name}}</h3>
                    <p>工号：{{this.user.jobNumId}}</p>
                </div>
                <div class="right">
                    <p>生日：{{this.user.birthday}}</p>
                    <!--<p>年假数：{{this.user.yearHolidays}} day</p>-->
                    <p>截止月初1号可调休天数：{{this.user.remainday}} day</p>
                    <p>入职时间：{{this.user.enrtyDate}}</p>
                    <p>入职天数：{{this.user.betweenDays}} day</p>
                </div>

            </div>
            <h4>每月9号修改最新数据（休息日顺延），数据有问题联系人力资源行政组-邱丽萍</h4>
        </div>

        <!--<div>
            <h4>每月9号修改最新数据（休息日顺延），数据有问题联系人力资源行政组-邱丽萍</h4>
        </div>-->
    </div>
</template>

<script>
    import Vue from 'vue';
    import {Pagination,Icon,Badge  } from "vant"

    Vue.use(Pagination);
    Vue.use(Icon);
    Vue.use(Badge);

    export default {
        name:'userInfo',
        data() {
            return {
                user:[],
            };
        },

        created() {
            this.user = JSON.parse(localStorage.getItem('userInfo'));
        },
        methods: {


        },
    };
</script>

<style lang="scss" scoped>
    .avatorInfo{
        max-width: 540px;
        border: 1px solid rgba(0,0,0,0.2);

        border-radius: 10px;
        background: white;
        margin: 50px auto;
        &>h4{
            font-size: 14px;
            font-weight: 400;
            text-align: center;
            margin: 20px 0;
        }
        .avatorInfo1{
            padding: 40px 40px 0;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;
        }
        .left{
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            justify-content: center;
            h3{
                margin: 10px 0;
            }
        }
        .right{
            p{
                margin-bottom: 10px;
            }
        }
    }

</style>
